:root {
    /* 基础主题色 */
    --color-brand: #674fde;
    --gradient-brand: linear-gradient(to right, #5c35c6, #9618fd);
    --color-success: #67c23a;
    --color-warning: #e6a23c;
    --color-danger: #f56c6c;
    --color-info: #909399;

    /* 品牌色分层色阶 */
    --color-brand-50: #f6f4fe;
    --color-brand-100: #ebe6fd;
    --color-brand-200: #d6cbfa;
    --color-brand-300: #bfaefa;
    --color-brand-400: #a390f4;
    --color-brand-500: #674fde;
    --color-brand-600: #5943bb;
    --color-brand-700: #493796;

    /* 文字颜色（亮色主题） */
    --text-brand: var(--color-brand); /* 品牌色 */
    --text-primary: #303133; /* 主文字 */
    --text-regular: #606266; /* 常规文字 */
    --text-secondary: #909399; /* 次要文字 */
    --text-placeholder: #c0c4cc; /* 占位/禁用 */
    --text-inverse: #ffffff; /* 反色文字（深底色上） */
    --text-link: var(--color-brand); /* 链接文字 */
    --text-danger: var(--color-danger); /* 危险文字 */
    --text-warning: var(--color-warning); /* 警告文字 */
    --text-success: var(--color-success); /* 成功文字 */

    /* 边框颜色（亮色主题） */
    --border-color: #dcdfe6; /* 基础边框 */
    --border-color-light: #e4e7ed; /* 浅色边框 */
    --border-color-dark: #c0c4cc; /* 深色边框 */
    --divider-color: #ebeef5; /* 分割线 */

    /* 背景颜色（亮色主题） */
    --bg-base: #ffffff; /* 页面/卡片底色 */
    --bg-muted: #f5f7fa; /* 次级底色（列表/块）*/
    --bg-soft: #f0f2f5; /* 更柔和底色 */
    --bg-overlay: rgba(0, 0, 0, 0.4); /* 遮罩 */
    --bg-brand: var(--color-brand);
    --bg-success: var(--color-success);
    --bg-warning: var(--color-warning);
    --bg-danger: var(--color-danger);
    /* 各色系浅色背景（亮色主题，轻微着色） */
    --bg-brand-soft: color-mix(in srgb, var(--color-brand) 12%, var(--bg-base));
    --bg-success-soft: color-mix(in srgb, var(--color-success) 12%, var(--bg-base));
    --bg-warning-soft: color-mix(in srgb, var(--color-warning) 12%, var(--bg-base));
    --bg-danger-soft: color-mix(in srgb, var(--color-danger) 12%, var(--bg-base));
    --bg-info-soft: color-mix(in srgb, var(--color-info) 12%, var(--bg-base));
}

[data-theme="dark"] {
    --color-brand: #3949ab;

    /* 品牌色分层色阶（tailwindshades for #3949ab） */
    --color-brand-50: #eceffe;
    --color-brand-100: #c6d2f7;
    --color-brand-200: #a3b7f0;
    --color-brand-300: #7b99e5;
    --color-brand-400: #527cdb;
    --color-brand-500: #3949ab;
    --color-brand-600: #303d8d;
    --color-brand-700: #232e6b;

    --color-success: #7bd88f;
    --color-warning: #fabe5e;
    --color-danger: #ff7b7b;
    --color-info: #b0b7c3;

    /* 文字颜色（暗色主题） */
    --text-brand: var(--color-brand);
    --text-primary: #cfd3dc;
    --text-regular: #a3a6ad;
    --text-secondary: #a3a6ad;
    --text-placeholder: #8d9095;
    --text-inverse: #0a0a0a; /* 反色文字（浅底色上） */
    --text-link: var(--color-brand);
    --text-danger: var(--color-danger);
    --text-warning: var(--color-warning);
    --text-success: var(--color-success);

    /* 边框颜色（暗色主题） */
    --border-color: #3a3f4b; /* 基础边框 */
    --border-color-light: #2a2f3a; /* 浅色边框 */
    --border-color-dark: #4a5060; /* 深色边框 */
    --divider-color: #2f3441; /* 分割线 */

    /* 背景颜色（暗色主题） */
    --bg-base: #0f1115; /* 页面/卡片底色 */
    --bg-muted: #171a21; /* 次级底色（列表/块）*/
    --bg-soft: #1e2230; /* 更柔和底色 */
    --bg-overlay: rgba(255, 255, 255, 0.12); /* 遮罩 */
    --bg-brand: var(--color-brand); /* 品牌色背景 */
    --bg-success: var(--color-success); /* 成功背景 */
    --bg-warning: var(--color-warning); /* 警告背景 */
    --bg-danger: var(--color-danger); /* 危险背景 */
    /* 各色系浅色背景（暗色主题，基于当前底色轻微着色） */
    --bg-brand-soft: color-mix(in srgb, var(--color-brand) 20%, var(--bg-base));
    --bg-success-soft: color-mix(in srgb, var(--color-success) 20%, var(--bg-base));
    --bg-warning-soft: color-mix(in srgb, var(--color-warning) 20%, var(--bg-base));
    --bg-danger-soft: color-mix(in srgb, var(--color-danger) 20%, var(--bg-base));
    --bg-info-soft: color-mix(in srgb, var(--color-info) 20%, var(--bg-base));
}
